<template>
	<div
		ref="listWrap"
		class="list-warp"
		:style="{ minHeight: props.show * props.itemHeight + 'px' }"
		@scroll="listScrollHanler"
	>
		<div
			ref="listRef"
			class="list-bar"
			:style="{ height: props.total * props.itemHeight + 'px' }"
		>
			<div
				class="list"
				:style="`top: ${positionTop}px; height: ${
					props.show * props.itemHeight + 'px'
				}`"
			>
				<div
					class="item"
					:style="{ height: props.itemHeight + 'px' }"
					v-for="item in showArr"
					:key="item"
				>
					<slot name="item" :row="item"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'

let props = defineProps({
	total: {
		type: Number,
		default: 1000
	},
	show: {
		type: Number,
		default: 10
	},
	itemHeight: {
		type: Number,
		default: 32
	},
	datalist: {
		type: Array,
		default: () => {
			let arr = []
			for (let index = 0; index < 1000; index++) {
				arr.push(index)
			}
			return arr
		}
	}
})

let listRef = ref(null)
let start = ref(0)
let end = ref(10)
let positionTop = ref(0)
let showArr = computed(() => {
	let s = start.value
	return props.datalist.slice(s, s + 10)
})

onMounted(() => {
	listRef.value.style.height = props.total.value * props.itemHeight + 'px'
})

const listScrollHanler = event => {
	const { scrollTop } = event.target
	start.value = parseInt(scrollTop / props.itemHeight)
	positionTop.value = scrollTop
	console.log(scrollTop, start.value)
}
</script>

<style lang="less" scoped>
* {
	box-sizing: border-box;
}
.list-warp {
	width: 600px;
	overflow-x: hidden;
	margin: 0px auto;
	border: 1px solid;
	.list-bar {
		position: relative;
		.list {
			width: 100%;
			padding: 0 2px;
			position: absolute;
			top: 0;
			left: 0;

			.item {
				width: 100%;
				border-bottom: 1px solid #666262;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
